<template>
  <el-dialog
    title="工单配置"
    :visible="showOrderConfig"
    width="630px"
    @close="closeFn"
  >
    <el-row type="flex" justify="center">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="补货警戒线:" prop="num">
          <template>
            <el-input-number
              v-model="form.num"
              controls-position="right"
              style="width: 396px"
              @change="handleChange"
              :min="0"
              :max="100"
              placeholder="请输入"
            ></el-input-number>
          </template>
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-button size="middle" @click="closeFn">取 消</el-button>
          <el-button size="middle" type="primary" @click="submit">确 定</el-button>
        </el-row>
      </el-form>
    </el-row>
  </el-dialog>
</template>

<script>
import { getOrderConfigNum, setOrderConfigNum } from '@/api/order'
export default {
  props: {
    showOrderConfig: Boolean,
    OrderConfigNum: Number
  },
  data () {
    return {
      form: {
        num: null
      },
      rules: {
        num: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getOrderConfigNum()
  },
  methods: {
    async getOrderConfigNum () {
      const res = await getOrderConfigNum()
      this.form.num = res.data
    },
    closeFn () {
      this.$refs.form.validate((pass) => {
        if (pass) {
          this.$refs.form.resetFields()
          this.form.num = null
        }
      })
      this.$emit('update:showOrderConfig', false)
    },
    // 修改工单配置阈值
    async submit () {
      await setOrderConfigNum({ alertValue: this.form.num })
      this.closeFn()
      this.$parent.getOrdersList()
    },
    handleChange (value) {
      // console.log(value)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-dialog {
  border-radius: 10px;
}
</style>
>
